<!--
 * @Descripttion: 
 * @version: 
 * @Author: qingzi
 * @Date: 2022-04-20 17:18:59
 * @LastEditors: qingzi
 * @LastEditTime: 2023-03-14 11:39:55
-->
<template>
  <div class="login f">
    <div class="login-body" />
    <div class="login-form">
      <!-- <div class="login-title" /> -->
      <div class="login-wrapper">
        <div class="login-title">登录</div>

        <el-form
          ref="loginFormRef"
          :model="ruleForm"
          status-icon
          class="demo-ruleForm pt40"
          :rules="rules"
        >
          <el-form-item label="" prop="username">
            <!-- <i class="iconfont icon-zhangxiao" /> -->
            <el-input v-model="ruleForm.username" placeholder="请输入用户名">
              <template #prepend>
                <i class="iconfont icon-zhangxiao fon-color"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              type="password"
            >
              <template #prepend>
                <i class="iconfont icon-mima fon-color"
              /></template>
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <!-- <el-form-item prop="verificationCode">
          <el-input v-model="ruleForm.verificationCode" auto-complete="off" style="width: 65%" placeholder="请输入右侧验证码" />

          <div class="captcha">
            <img :src="captchaBase64" height="38px" @click="handleCaptchaGenerate" />
          </div>
        </el-form-item> -->
          <div class="fe login-text">
            <div v-if="errorText" class="login-text-error">
              用户名或密码错误
            </div>
            <el-checkbox
              v-model="isRememberPwd"
              label="记住密码"
              size="large"
            />
            <!-- <el-button type="text" @click="handlePass"> 忘记密码 </el-button> -->
          </div>
          <el-form-item style="text-align: center; margin-top: 32px">
            <div class="loginbtn cp" @click="submitForm()">登录</div>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            <!-- <el-button @click="handleTestClick">ddfdf</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { loginApi, getCaptcha } from "@/api/login/api";
import { reactive, ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { sessionStorage, localStorage as localStorage1 } from "@/utils/storage";
import { loginStore } from "@/store/login";
const { login } = loginStore();

const captchaBase64 = ref<string>("");

const state = reactive({
  ruleForm: {
    password: "12345678",
    username: "13051550001",
  },
  rules: {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
  optionData: [
    {
      name: "数据1",
      value: 30,
    },
    {
      name: "数据2",
      value: 20,
    },
    {
      name: "数据3",
      value: 30,
    },
    {
      name: "数据4",
      value: 10,
    },
    {
      name: "数据5",
      value: 10,
    },
  ],
});
const { ruleForm, rules, optionData } = state;
const isRememberPwd = ref(false);
const errorText = ref(false);
isRememberPwd.value = !!localStorage.getItem("password");

console.log("isRememberPwd.value", localStorage.getItem("password"));

const router = useRouter();
const loginFormRef = ref<FormInstance | null>(null);
console.log(loginFormRef);
// const resetForm = () => {
// console.log("reset form");
// };

onMounted(() => {
  localStorage1.clear();
  sessionStorage.clear();
  // handleCaptchaGenerate();
  // ruleForm.username=localStorage.getItem("username") as string;
  // ruleForm.password= localStorage.getItem("password") as string;
});

const handlePass = () => {
  router.push("/password");
};
const submitForm = async () => {
  try {
    // const form = unref(loginFormRef);
    // await form.validate(); //使用unref(ruleForm)表单验证写法
    await loginFormRef.value?.validate(); //未使用unref 表单验证的写法
    const resData = {
      password: ruleForm.password as string,
      username: ruleForm.username as string,
      // codeKey: ruleForm.codeKey,
      // verificationCode: ruleForm.verificationCode
    };
    // loginApi(resData).then((res) => {
    //   const { data } = res;
    //   console.log(`登录成功`, data,isRememberPwd.value);

    //   if (isRememberPwd.value) {
    //     localStorage.setItem("username",  ruleForm.username);
    //     localStorage.setItem("password",  ruleForm.password);
    //   }
    //   sessionStorage.set(TOKEN, data.token);
    //   sessionStorage.set(USERINFO, data);

    //   setTimeout(() => {
    //     // handleCaptchaGenerate();
    //     router.push({path:"/openHome"})

    //   },5);
    // });
    nextTick(() => {
      router.push({ path: "/openHome" });
    });
    login(resData, isRememberPwd.value)
      .then((res) => {
        console.log("denbglu", res);
        const { code } = res as unknown as {
          code: string;
          data: any;
          msg: string;
        };
        if (code === "20006") {
          errorText.value = true;
          return;
        }
        console.log(1);
        nextTick(() => {
          router.push({ path: "/openHome" });
        });
      })
      .catch((err) => {});
  } catch (err) {
    console.log("失败" + err);
  }
};
</script>
<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background: url(../assets/img/login-bg.png) no-repeat;
  background-size: cover;
  &-body {
    width: 70%;
    // min-width: 1236px;
    height: 100%;
    // background-image: url("../assets/login_bg.png");
    // background-size: 100% 100%;
    background: url("../assets/img/login_title.png") no-repeat;
    background-position: 52px 44px;
  }
  &-title {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 28px;
    color: #333333;
    // background-image: url("../assets/img/login_title.png");
    // background-size: 100% 100%;
  }
  &-wrapper {
    width: 440px;
    height: 100%;

    background: #ffffff;
    border-radius: 12px;
    padding: 48px 40px 86px 40px;
  }
  &-form {
    // width: 684px;
    padding: 0 156px;
    .loginbtn {
      width: 360px;
      height: 52px;
      line-height: 52px;
      // background: #8fcbff;
      background-color: #096dd9;
      color: #fff;
      box-shadow: 0 1px 9px 0 #8fcbff;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 20px;
      color: #ffffff;
      &:hover {
        background: #1a58ef;
      }
    }
  }
  .captcha {
    width: 108px;
    height: 38px;
    box-shadow: 0 1px 9px 0 #8fcbff;
    position: absolute;
    right: 0;
    top: 0;
    img {
      width: 100%;
      height: 38px;
      cursor: pointer;
      vertical-align: middle;
    }
  }
}

.fon-color {
  color: #5c92e9;
}
</style>
<style lang="less">
.login {
  .el-input__wrapper {
    height: 40px;
    border-radius: 0 !important;
    // border: 1px solid #d1deff;
    border: none;
    box-shadow: none !important;
  }
}

.login-form .el-form {
  .el-form-item__content .el-input-group__prepend {
    padding: 0 !important;
    border: none !important;
    background-color: none;
    box-shadow: none !important;
  }
  .el-form-item__content {
    border-bottom: 2px solid rgba(72, 100, 131, 0.4);
  }
  .el-input-group--prepend > .el-input__wrapper {
    border: none;
  }
}

.login-text {
  position: relative;
}
.login-text-error {
  position: absolute;
  left: 0;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #c61c1c;
  top: -10px;
}
</style>
